<template>
	<view class="login-container">
		<view class="login-bg"></view>
		<view class="login-top-navigation" style="z-index: 5;">
			<view
				class="login-close-button"
				@click="back"
			>
				<u-icon
					name="close"
					size="24"
					color="#000000"
					:bold="true"
				></u-icon>
			</view>
		</view>
		<view class="login-form">
			<view class="page-titles">登录</view>

			<view class="inputs">
				<LoginInputWithIconVue
					icon="account-fill"
					type="text"
					placeholder="请输入手机号码"
					v-model="phoneNumber"
				/>
				<LoginInputWithIconVue
					icon="lock-fill"
					type="password"
					placeholder="请输入密码"
					v-model="password"
				/>
			</view>
			<view class="login-button">
				<button
					type="primary"
					@click="login"
					:disabled="disabled"
					:loading="loading"
				>
					登录
				</button>
			</view>
			<view class="login-other">
				<span @click="ToCodeLogin">账号注册</span>
				|
				<span @click="toMailLogin">邮箱登录</span>
			</view>
		</view>
	</view>
</template>

<script>
import LoginInputWithIconVue from '../../components/login/LoginInputWithIcon.vue';
import { login } from '@/common/api/api.js';
import { mapMutations, mapGetters } from 'vuex';
export default {
	data() {
		return {
			phoneNumber: '',
			password: '',
			disabled: false,
			loading: false
		};
	},
	components: {
		LoginInputWithIconVue
	},
	methods: {
		...mapMutations(['updateUser']),
		...mapGetters(['getUserInfo']),
		back() {
			uni.navigateBack();
		},
		async login() {
			if (this.phoneNumber === '' || this.password === '') {
				uni.showToast({
					icon: 'error',
					title: '请输入正确的账号或密码'
				});
				return;
			}
			try {
				const result = await login(this.phoneNumber, this.password);
				const code = result.statusCode;
				if (code === 200) {
					const userData = result.userData;
					userData.token = result.token;
					uni.showToast({
						title: '登录成功'
					});
					//将用户数据存储到store中
					this.updateUser(userData);
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			} catch (error) {
				uni.showToast({
					icon: 'error',
					title: '登录失败，请检查手机号或密码是否正确'
				});
				console.log(error);
			}
		},
		ToCodeLogin() {
			uni.navigateTo({
				url: '/pages/codelogin/codelogin'
			});
		},
		toMailLogin() {
			uni.navigateTo({
				url: '/pages/mail-logiin/mail-logiin'
			});
		}
	},
	watch: {},
	mounted() {}
};
</script>

<style lang="scss">
.login-container {
	width: 750rpx;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	.login-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0%;
		left: 0%;
		background: linear-gradient(to bottom, rgba(116, 195, 202, 1), rgba(116, 195, 202, 0)); /* 从上到下的线性渐变 */
	}
	.bgImg {
		position: absolute;
		top: 7%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.login-top-navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 0%;
		left: 1%;
		width: 375rpx;
		height: 100rpx;
		margin-left: 50rpx;
		margin-top: 50rpx;
		position: fixed;
		.login-close-button {
			float: left;
		}
	}

	.login-form {
		width: 80%;
		height: 350px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		// background-color: red;
		// box-shadow: 0px 10px 15px -3px rgba(110, 163, 219, 1);
		border-radius: 10px;
		z-index: 1;
		.page-titles {
			font-weight: 700;
			margin-top: 10px;
			width: 100%;
			margin-left: 70rpx;
		}
		.inputs {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.login-button {
			margin-top: 70rpx;
			width: 80%;
			button {
				background-color: rgba(0, 41, 251, 0.7);
				color: #fff;
				border: none;
			}
		}
		.login-other {
			font-size: 24rpx;
			color: #999;
			margin-top: 50rpx;
			span {
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
